<div class="form-group" ng-class="{'has-error' : errors.name}">
    <label class="col-sm-4 control-label">Name <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.name" class="form-control">
        <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
        <p class="help-block">The service name.</p>
    </div>
</div>

<!-- EXTRAS -->
<div class="form-group">
    <label class="col-sm-4 control-label">Description <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.extras.description" class="form-control">
        <p class="help-block">An optional service description.</p>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label">Tags <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <chips ng-model="service.extras.tags">
            <chip-tmpl>
                <div class="default-chip">
                    {{chip}}
                    <i class="mdi mdi-close" remove-chip></i>
                </div>
            </chip-tmpl>
            <input ng-model-control
                   data-ng-keypress="onTagInputKeyPress($event)"
                   ng-model="$tag" uib-typeahead="tag for tag in tags | filter:$viewValue | limitTo:10"/>
        </chips>
        <p class="help-block">
           Optionaly add tags to the service
        </p>
    </div>
</div>
<!--/ END EXTRAS -->

<div class="form-group" ng-class="{'has-error' : errors.url}" ng-if="!service.id">
    <label class="col-sm-4 control-label">Url <br><em><small class="help-block">shorthand-attribute</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.url" class="form-control">
        <div class="text-danger" ng-if="errors.url" data-ng-bind="errors.url"></div>
        <p class="help-block">
            Shorthand attribute to set <code>protocol</code>, <code>host</code>, <code>port</code> and <code>path</code> at once.
            This attribute is write-only (the Admin API never "returns" the url).
        </p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.protocol}">
    <label class="col-sm-4 control-label">Protocol <br><em><small class="help-block">semi-optional</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.protocol" class="form-control">
        <div class="text-danger" ng-if="errors.protocol" data-ng-bind="errors.protocol"></div>
        <p class="help-block">The protocol used to communicate with the upstream.  It can be one of <code>http</code> or <code>https</code>.</p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.host}">
    <label class="col-sm-4 control-label">Host <br><em><small class="help-block">semi-optional</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.host" class="form-control">
        <div class="text-danger" ng-if="errors.host" data-ng-bind="errors.host"></div>
        <p class="help-block">The host of the upstream server.</p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.port}">
    <label class="col-sm-4 control-label">Port <br><em><small class="help-block">semi-optional</small></em></label>
    <div class="col-sm-7">
        <input type="number" ng-model="service.port" class="form-control">
        <div class="text-danger" ng-if="errors.port" data-ng-bind="errors.port"></div>
        <p class="help-block">The upstream server port. Defaults to <code>80</code>.</p>
    </div>
</div>


<div class="form-group" ng-class="{'has-error' : errors.path}">
    <label class="col-sm-4 control-label">Path <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input ng-model="service.path" class="form-control">
        <div class="text-danger" ng-if="errors.path" data-ng-bind="errors.path"></div>
        <p class="help-block">The path to be used in requests to the upstream server. Empty by default.</p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.retries}">
    <label class="col-sm-4 control-label">Retries <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input type="number" ng-model="service.retries" class="form-control">
        <div class="text-danger" ng-if="errors.retries" data-ng-bind="errors.retries"></div>
        <p class="help-block">The number of retries to execute upon failure to proxy. The default is <code>5</code>.</p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.connect_timeout}">
    <label class="col-sm-4 control-label">Connect timeout <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input type="number" ng-model="service.connect_timeout" class="form-control">
        <div class="text-danger" ng-if="errors.connect_timeout" data-ng-bind="errors.connect_timeout"></div>
        <p class="help-block">The timeout in milliseconds for establishing a connection to your upstream server. Defaults to <code>60000</code></p>
    </div>
</div>

<div class="form-group" ng-class="{'has-error' : errors.write_timeout}">
    <label class="col-sm-4 control-label">Write timeout <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input type="number" ng-model="service.write_timeout" class="form-control">
        <div class="text-danger" ng-if="errors.write_timeout" data-ng-bind="errors.write_timeout"></div>
        <p class="help-block">The timeout in milliseconds between two successive write operations for transmitting a request to the upstream server. Defaults to <code>60000</code></p>
    </div>
</div>
<div class="form-group" ng-class="{'has-error' : errors.read_timeout}">
    <label class="col-sm-4 control-label">Read timeout <br><em><small class="help-block">optional</small></em></label>
    <div class="col-sm-7">
        <input type="number" ng-model="service.read_timeout" class="form-control">
        <div class="text-danger" ng-if="errors.read_timeout" data-ng-bind="errors.read_timeout"></div>
        <p class="help-block">The timeout in milliseconds between two successive read operations for transmitting a request to the upstream server. Defaults to <code>60000</code></p>
    </div>
</div>